<template>
	<div class="position-relative">
		<a-form :form="form" autocomplete="off">
			<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="账号">
				<a-input v-decorator="['username']" placeholder="请输入你的姓名" disabled />
			</a-form-item>
			<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="机构">
				<a-input v-decorator="['orgName']" placeholder="请输入你的机构" disabled />
			</a-form-item>
			<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="姓名">
				<a-input
					v-decorator="[
						'realName',
						{
							rules: [
								{ required: true, message: '请输入你的姓名' },
								{ max: 50, message: '姓名不超过50个字符' }
							],
							getValueFromEvent: removeSpaces
						}
					]"
					placeholder="请输入你的姓名"
				/>
			</a-form-item>
			<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="手机">
				<a-input v-decorator="['phoneNo', { rules: [{ pattern: /^1[0-9]{10}$/, message: '请输入正确的手机号码' }] }]" placeholder="请输入你的手机号码" />
			</a-form-item>
			<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="邮箱">
				<a-input
					v-decorator="[
						'email',
						{
							rules: [
								{
									type: 'email',
									message: '请输入正确的邮箱!'
								}
							]
						}
					]"
					placeholder="请输入你的邮箱"
				/>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
import pick from 'lodash.pick';
import { sysManageapi } from '@/api/index';
const formItemLayout = {
	labelCol: {
		span: 4
	},
	wrapperCol: {
		span: 18
	}
};

export default {
	data() {
		return {
			formItemLayout,
			form: this.$form.createForm(this),
			userInfo: {}
		};
	},
	created() {
		try {
			this.userInfo = this.$ls.get('userInfo');
			this.$nextTick(() => {
				this.form.setFieldsValue(pick(this.userInfo, 'username', 'email', 'orgName', 'phoneNo', 'realName'));
			});
		} catch (e) {
			//TODO handle the exception
		}
	},
	methods: {
		updatePeronal() {
			this.form.validateFields((err, values) => {
				if (!err) {
					let userInfo = Object.assign({}, this.userInfo, values);
					this.$postAction(sysManageapi.editUser, userInfo).then(da => {
						if (da.code == 1) {
							this.$message.success('修改个人信息成功');
							this.$emit('saveSuccess');
						}
					});
				}
			});
		},
		removeSpaces(e) {
			return e.target.value.trim();
			// return e.target.value.replace("\\u200B","")
		}
	}
};
</script>
